<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layouts/layout">
<head>
    <link th:href="@{/javascripts/pagination/jquery.pagination.min.css}" rel="stylesheet"/>

</head>
<body>
<div layout:fragment="content">
    <div class="text-right" style="margin-bottom: 20px;">
        <button type="button" onclick="editStudent()" class="btn btn-primary btn-xs"><i
                class="icon-plus2 position-left"></i>添加学员
        </button>
    </div>
    <div class="panel panel-flat">
        <div class="panel-body">
            <div class="table-responsive">
                <div class="datatable-scroll">
                    <table class="table" id="tbl-student-list">
                        <thead>
                        <tr>
                            <th class="text-center">学员封面</th>
                            <th class="text-center" style="width: 45%;">学员介绍</th>
                            <th class="text-center">创建时间</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div layout:fragment="modal-content">
    <div class="modal fade" id="modal-student-edit" aria-hidden="true">
        <div class="modal-dialog" style="width: 700px; margin-top: 20px!important; margin-bottom: 0!important;">
            <form class="form-horizontal" id="form-student-submit" enctype="multipart/form-data">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" style="float: right" data-dismiss="modal"
                                aria-hidden="true">×</button>
                        <h4 class="modal-title">编辑学员</h4>
                    </div>

                    <div class="modal-body">

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-info btn-submit">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /page content -->
</body>
</html>
<script type="text/javascript" th:src="@{/javascripts/pagination/jquery.pagination.min.js}"></script>
<script type="text/javascript">
    $(function () {
        loadStudentPage(0);
    });



    function loadStudentPage(pageNum) {
        $.ajax({
            url: '/management_system/studentPageItems',
            type: 'POST',
            data: {pageNumber: pageNum, pageSize: 10, sortFields: []},
            dataType: 'HTML',
            success: function (data) {
                $("#tbl-student-list").find("tbody").html(data);

            },
            error: function (error) {
                console.log(error);
            }
        });
    }


    function deleteStudentById(studentId) {
        $.ajax({
            url: '/management_system/deleteStudentById',
            type: 'GET',
            data: {studentId: studentId},
            dataType: 'JSON',
            success: function (data) {
                if(data.code == 0){
                    showSuccessMessage("删除成功！");
                    loadStudentPage(0);
                }else{
                    showErrorMessage("删除失败！");
                }

            },
            error: function (error) {
                console.log(error);
                showErrorMessage("删除失败！");
            }
        });
    }
    
    function editStudent(studentId) {
        $('#modal-student-edit').modal('show');
        $.ajax({
            url: '/management_system/editStudent',
            type: 'POST',
            data: {studentId: studentId},
            dataType: 'HTML',
            success: function (data) {
                $('#modal-student-edit').find("div.modal-body").html(data);
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
</script>

